<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: header"/>
<body>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">

    <div class="layui-col-sm6 layui-col-md4">
      <div class="layui-card">
        <div class="layui-card-header">
          CPU使用情况
          <span class="layui-badge layui-bg-blue layuiadmin-badge">CPU</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font" th:text="${server.cpu.usedAll + '%'}">0%</p>
          <div class="layui-progress" style="margin-top: 5px;margin-bottom: 10px;">
            <div class="layui-progress-bar" th:attr="lay-percent=${server.cpu.usedAll}+'%'"></div>
          </div>
          <p>
            CPU核心数
            <span class="layuiadmin-span-color"><span th:text="${server.cpu.cpuNum}">100%</span><i class="layui-inline layui-icon layui-icon-flag"></i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4">
      <div class="layui-card">
        <div class="layui-card-header">
          内存使用情况
          <span class="layui-badge layui-bg-cyan layuiadmin-badge">内存</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font" th:text="${server.mem.used + 'G'}">0GB</p>
          <div class="layui-progress" lay-showPercent="no" style="margin-top: 5px;margin-bottom: 10px;">
            <div class="layui-progress-bar" th:attr="lay-percent=${server.mem.percent}+'%'"></div>
          </div>
          <p>
            总内存
            <span class="layuiadmin-span-color"><span th:text="${server.mem.total + 'G'}">0GB</span> <i class="layui-inline layui-icon layui-icon-flag-smile-b"></i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md4">
      <div class="layui-card">
        <div class="layui-card-header">
          JVM使用情况
          <span class="layui-badge layui-bg-green layuiadmin-badge">JVM</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font" th:text="${server.jvm.total + 'M'}">0MB</p>
          <div class="layui-progress" lay-showPercent="no" style="margin-top: 5px;margin-bottom: 10px;">
            <div class="layui-progress-bar" th:attr="lay-percent=${server.jvm.percent}+'%'"></div>
          </div>
          <p>
            总内存
            <span class="layuiadmin-span-color"><span th:text="${server.jvm.max + 'M'}">0MB</span><i class="layui-inline layui-icon layui-icon-flag"></i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm12">
      <div class="layui-card">
        <div class="layui-card-header">磁盘状态</div>
        <div class="layui-card-body">
          <table class="layui-table layuiadmin-page-table" lay-skin="line">
            <thead>
            <tr>
              <th>盘符路径</th>
              <th>文件系统</th>
              <th>盘符类型</th>
              <th>总大小</th>
              <th>可用大小</th>
              <th>已用大小</th>
              <th width="40%">已用百分比</th>
            </tr>
            </thead>
            <tbody>
              <tr th:each="sysFile : ${server.sysFiles}">
                <td th:text="${sysFile.dirName}">C:\</td>
                <td th:text="${sysFile.sysTypeName}">NTFS</td>
                <td th:text="${sysFile.typeName}">local</td>
                <td th:text="${sysFile.total}">0GB</td>
                <td th:text="${sysFile.free}">0GB</td>
                <td th:text="${sysFile.used}">0GB</td>
                <td>
                  <div class="layui-progress layui-progress-big" lay-showPercent="true" style="border-radius: 0px">
                    <div class="layui-progress-bar" th:attr="lay-percent=${sysFile.usage}+'%'" style="border-radius: 0px"></div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6">
      <div class="layui-card">
        <div class="layui-card-header">服务器信息</div>
        <div class="layui-card-body layui-text">
          <table class="layui-table">
            <colgroup>
              <col width="120">
              <col>
            </colgroup>
            <tbody>
            <tr>
              <td class="layui-bg-gray">服务器名称</td>
              <td th:text="${server.sys.computerName}">Domor</td>
            </tr>
            <tr>
              <td class="layui-bg-gray">操作系统</td>
              <td th:text="${server.sys.osName}">Windows</td>
            </tr>
            <tr>
              <td class="layui-bg-gray">服务器IP</td>
              <td th:text="${server.sys.computerIp}">127.0.0.1</td>
            </tr>
            <tr>
              <td class="layui-bg-gray">系统架构</td>
              <td th:text="${server.sys.osArch}">amd64</td>
            </tr>
            <tr>
              <td class="layui-bg-gray">项目路径</td>
              <td th:text="${server.sys.userDir}"></td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6">
      <div class="layui-card">
        <div class="layui-card-header">Java虚拟机信息</div>
        <div class="layui-card-body layui-text">
          <table class="layui-table">
            <colgroup>
              <col width="120">
              <col>
            </colgroup>
            <tbody>
            <tr>
              <td class="layui-bg-gray">Java名称</td>
              <td th:text="${server.jvm.name}">Java</td>
            </tr>
            <tr>
              <td class="layui-bg-gray">Java版本</td>
              <td th:text="${server.jvm.version}">1.8.0</td>
            </tr>
            <tr>
              <td class="layui-bg-gray">安装路径</td>
              <td th:text="${server.jvm.home}"></td>
            </tr>
            <tr>
              <td class="layui-bg-gray">启动时间</td>
              <td th:text="${server.jvm.startTime}">2018-12-31 00:00:00</td>
            </tr>
            <tr>
              <td class="layui-bg-gray">运行时长</td>
              <td th:text="${server.jvm.runTime}">0天0时0分0秒</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<script>
  layui.use(['index', 'sample']);
</script>
</body>
</html>